<template>
  <div class="coupon-widget">
    <div class="coupon-image" v-if="url">
      <img :src="url" alt="" style="object-fit: scale-down;">
    </div>
    <div class="empty" v-else>
      <i class="el-icon-s-ticket"></i>
    </div>
  </div>
</template>

<script>
import { typeConstants } from '../../../../config'
export default {
  name: 'PreviewCoupon',
  props: {
    params: { // 这里是可点击区域
      type: Array,
      default: () => ([])
    },
    type: {
      type: String,
      default: typeConstants.COUPON_1
    },
    background: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '375',
      validator: val => !isNaN(val)
    },
    height: {
      type: [String, Number],
      default: '0',
      validator: val => !isNaN(val)
    },
    index: {
      type: Number,
      default: -1
    }
  },
  computed: {
    radio () {
      return Number(this.height) / Number(this.width)
    }
  },
  watch: {
    radio: {
      handler (val) {
        if (val !== 0) {
          this.$nextTick(() => {
            this.resetHeight()
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    resetHeight () {
      if (this.$el) {
        const el = this.$el
        el.style.setProperty('--height', 0)
        el.style.setProperty('--paddingBottom', `calc(${this.radio} * 100%)`)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-widget {
  --height: 100px;
  --paddingBottom: 0;
  position: relative;
  width: 100%;
  height: var(--height);
  padding-bottom: var(--paddingBottom);
  box-sizing: border-box;
  overflow: hidden;
  .coupon-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
}

</style>